<template>
  <div id="sceniccomment" class="scenic-comment-container">
    <!-- 页面头部 -->
    <div class="header-section">
      <div class="header-content">
        <div class="title-section">
          <h2 class="page-title">
            <i class="el-icon-thumb"></i> 景点评论管理
          </h2>
          <p class="page-subtitle">管理用户对景点的评论数据</p>
        </div>
        <div class="total-count">
          <div class="count-card">
            <span class="count-label">总评论数</span>
            <span class="count-value">{{ totalCommentCount }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 搜索筛选区 - 修改为与景点点赞相同的样式 -->
    <div class="search-filter-card">
      <div class="filter-group">
        <div class="filter-item">
          <label class="filter-label">
            <i class="el-icon-user"></i> 评论用户
          </label>
          <el-input
            v-model="searchParams.userName"
            placeholder="输入用户名搜索"
            clearable
            class="filter-input"
            @keyup.enter="handleSearch"
          />
        </div>
        <div class="filter-item">
          <label class="filter-label">
            <i class="el-icon-place"></i> 评论景点
          </label>
          <el-input
            v-model="searchParams.scenicName"
            placeholder="输入景点名称搜索"
            clearable
            class="filter-input"
            @keyup.enter="handleSearch"
          />
        </div>
        <div class="filter-item">
          <label class="filter-label">
            <i class="el-icon-date"></i> 评论时间
          </label>
          <el-date-picker
            v-model="searchParams.date"
            type="daterange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            class="compact-date-picker"
          />
        </div>
      </div>
      
      <div class="action-buttons">
        <el-button 
          type="primary"  
          @click="handleSearch"
          class="search-btn"
        >
          查询
        </el-button>
        <el-button  
          @click="resetSearch"
          class="reset-btn"
        >
          重置
        </el-button>
        <el-button 
          type="danger"  
          @click="multiDelete"
          :disabled="multipleSelection.length === 0"
          class="batch-delete-btn"
        >
          批量删除
        </el-button>
      </div>
    </div>

    <!-- 数据表格 -->
    <div class="data-table-card">
      <el-table
        :data="tableData"
        border
        stripe
        highlight-current-row
        style="width: 100%"
        @selection-change="handleSelectionChange"
        :header-cell-style="{background: '#f5f7fa', color: '#606266'}"
      >
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column prop="userName" label="用户名" width="150" align="center">
          <template #default="scope">
            <div class="user-cell">
              <el-avatar :src="scope.row.userAvatar" size="small" align="center"></el-avatar>
              <span style="margin-left: 10px">{{ scope.row.userName }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="scenicAreaName" label="景点名称" width="180" align="center" />
        <el-table-column prop="commentContent" label="评论内容" min-width="170" />
        <el-table-column prop="commentTime" label="评论时间" width="180" align="center" :formatter="formatTableDate" />
        <el-table-column fixed="right" label="操作" width="90" align="center">
          <template #default="{ row }">
            <el-button 
              type="danger" 
              size="small" 
              @click="singleDelete(row)"
              plain
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页控制 -->
    <div class="pagination-container">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[5, 10, 20, 50]"
        :total="totalCount"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
        background
      />
    </div>
  </div>
</template>

<script>
import { Delete, Message } from '@element-plus/icons-vue'

export default {
  data() {   
    return {
      totalCommentCount: 0, // 总评论数
      totalCount: 0,        // 当前查询结果总数
      pageSize: 5,          // 默认每页5条
      currentPage: 1,
      dialogDetailVisible: false,
      searchParams: {  // 修改为与景点点赞相同的搜索参数结构
        userName: '',
        scenicName: '',
        date: ''
      },
      multipleSelection: [],
      tableData: [],
      detailForm: {
        scenicCommentId: '',
        userName: '',
        userAvatar: '',
        commentContent: '',
        commentTime: '',
        scenicAreaName: '',
      },
      Delete,
      Message
    };
  },
  mounted() {
    this.fetchData();
    this.fetchTotalCount();
  },
  methods: {
    // 获取总评论数
    fetchTotalCount() {
      console.log('fetchData called', this.searchParams);
      this.$http.get("http://localhost:8080/mw/sceniccomment/total")
        .then(response => {
          this.totalCommentCount = response.data || 0;
        })
        .catch(error => {
          this.$message.error("获取总评论数失败");
          console.error(error);
        });
    },
    
    handlePageChange(val) {
      this.currentPage = val;
      this.fetchData();
    },
    
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
      this.fetchData();
    },

    // 获取评论列表
        // 搜索功能
    handleSearch() {
      console.log('handleSearch called');
      this.currentPage = 1; // 查询时重置到第一页
      this.fetchData();
    },
    // 重置搜索
    resetSearch() {
      this.searchParams = {
        userName: '',
        scenicName: '',
        date: ''
      };
      this.currentPage = 1;
      this.fetchData();
    },
// 修改fetchData方法
fetchData() {
  const params = {
    pageNum: this.currentPage,
    pageSize: this.pageSize
  };

  // 构建keyword参数（合并搜索条件）
  if (this.searchParams.userName.trim() || this.searchParams.scenicName.trim()) {
    params.keyword = `${this.searchParams.userName.trim()} ${this.searchParams.scenicName.trim()}`.trim();
  }

  // 处理时间范围
  if (this.searchParams.date && this.searchParams.date.length === 2) {
    params.startDate = this.searchParams.date[0];
    params.endDate = this.searchParams.date[1];
  }

  console.log('fetchData params:', params); // 调试请求参数

  this.$http.get("http://localhost:8080/mw/sceniccomment/page/search", { params })
    .then(response => {
      this.tableData = response.data.list || [];
      this.totalCount = response.data.total || 0;
    })
    .catch(error => {
      console.error("请求失败:", {
        url: error.config.url,
        params: error.config.params,
        status: error.response?.status,
        data: error.response?.data
      });
      this.$message.error("查询失败: " + (error.response?.data?.message || error.message));
    });
},
    formatDate(dateString) {
      if (!dateString) return '';
      if (typeof dateString === 'number') {
        return new Date(dateString).toLocaleString();
      }
      return new Date(dateString).toLocaleString();
    },
    
    // 表格日期格式化
    formatTableDate(row, column, cellValue) {
      return this.formatDate(cellValue);
    },
    
    
    // 删除单个评论
    singleDelete(row) {
      this.$confirm('确认删除该评论吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        return this.$http.delete(`http://localhost:8080/mw/sceniccomment/delete?id=${row.scenicCommentId}`)
      }).then(() => {
        this.$message.success("删除成功");
        this.fetchData();
        this.fetchTotalCount(); // 更新总评论数
      }).catch((error) => {
        if (error === 'cancel' || error === 'close') {
          this.$message.info("已取消删除");
        } else {
          this.$message.error("删除失败: " + (error.response?.data?.message || "服务器错误"));
        }
      });
    },

    // 批量删除
    multiDelete() {
      if (this.multipleSelection.length === 0) {
        this.$message.warning("请至少选择一条评论");
        return;
      }

      this.$confirm(`确认删除选中的${this.multipleSelection.length}条评论吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const deletePromises = this.multipleSelection.map(item => 
          this.$http.delete(`http://localhost:8080/mw/sceniccomment/delete?id=${item.scenicCommentId}`)
        );
        
        Promise.all(deletePromises)
          .then(() => {
            this.$message.success("删除成功");
            this.fetchData();
            this.fetchTotalCount(); // 更新总评论数
          });
      }).catch(() => {});
    },
    

    
    // 多选处理
    handleSelectionChange(val) {
      this.multipleSelection = val;
    }
  }
};
</script>

<style scoped lang="scss">
/* 整体容器 */
.scenic-comment-container {
  max-width: 1200px;
  margin: 20px auto;
  padding: 0 20px;
  background-color: #f8fafc;
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Arial, sans-serif;
}

/* 头部区域 */
.header-section {
  background: linear-gradient(135deg, #a0c4e4 0%, #7fa8d1 100%);
  padding: 20px 25px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(160, 196, 228, 0.2);
  margin-bottom: 24px;
  color: #2c3e50;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title-section {
  .page-title {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    
    i {
      font-size: 28px;
      color: #2c3e50;
    }
  }
  
  .page-subtitle {
    margin: 5px 0 0;
    font-size: 14px;
    color: #4a5568;
  }
}

.total-count {
  .count-card {
    background: rgba(255, 255, 255, 0.7);
    padding: 12px 20px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid #e2e8f0;
    
    .count-label {
      font-size: 14px;
      margin-bottom: 5px;
      color: #4a5568;
    }
    
    .count-value {
      font-size: 24px;
      font-weight: 700;
      color: #2c3e50;
    }
  }
}

/* 搜索筛选卡片 - 保持与景点点赞相同的样式 */
.search-filter-card {
  background-color: white;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  margin-bottom: 20px;
}

.filter-group {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.filter-item {
  display: flex;
  flex-direction: column;
  
  .filter-label {
    font-size: 14px;
    color: #606266;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
    
    i {
      font-size: 16px;
    }
  }
  
  .filter-input {
    :deep(.el-input__inner) {
      border-radius: 8px;
      height: 40px;
      line-height: 40px;
    }
  }
  
  .compact-date-picker {
    width: 100%;
    
    :deep(.el-input__inner) {
      height: 36px;
      line-height: 36px;
    }
    
    :deep(.el-date-editor .el-range-separator) {
      line-height: 36px;
      padding: 0 8px;
      width: auto;
    }
    
    :deep(.el-date-editor .el-range-input) {
      height: 36px;
      width: 38%;
    }
    
    :deep(.el-date-editor .el-range__close-icon) {
      line-height: 36px;
    }
    
    :deep(.el-date-editor .el-range__icon) {
      line-height: 36px;
    }
  }
}

.action-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  
  .search-btn {
    background: linear-gradient(135deg, #4299e1 0%, #3182ce 100%);
    border: none;
    border-radius: 8px;
    padding: 10px 20px;
    height: 40px;
    
    &:hover {
      opacity: 0.9;
    }
  }
  
  .reset-btn {
    border-radius: 8px;
    padding: 10px 20px;
    height: 40px;
    border: 1px solid #dcdfe6;
    
    &:hover {
      color: #4299e1;
      border-color: #c6e2ff;
      background-color: #ecf5ff;
    }
  }
}

/* 批量删除按钮样式 - 与景点点赞保持一致 */
.batch-delete-btn {
  border-radius: 8px;
  padding: 10px 20px;
  height: 40px;
  
  &:hover {
    opacity: 0.9;
  }
  
  &:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }
}

/* 数据表格卡片 */
.data-table-card {
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  margin-bottom: 20px;
  
  :deep(.el-table) {
    border-radius: 12px 12px 0 0;
    overflow: hidden;
    
    th {
      background-color: #f8fafc !important;
      font-weight: 600;
      color: #4a5568;
    }
    
    td {
      padding: 12px 0;
    }
    
    .el-table__row:hover {
      background-color: #f0f4f8;
    }
  }
}

.comment-content {
  padding: 10px;
  background-color: #f8f8f8;
  border-radius: 4px;
  border: 1px solid #eee;
  max-height: 150px;
  overflow-y: auto;
}

/* 分页样式 */
.pagination-container {
  display: flex;
  justify-content: center;
  padding: 15px 0;
  
  :deep(.el-pagination) {
    .btn-prev, .btn-next {
      border-radius: 8px;
      border: 1px solid #e2e8f0;
    }
    
    .el-pager li {
      border-radius: 8px;
      border: 1px solid #e2e8f0;
      margin: 0 4px;
      background: white;
      
      &.active {
        background: linear-gradient(135deg, #4299e1 0%, #3182ce 100%);
        color: white;
      }
    }
    
    .el-pagination__jump {
      .el-input__inner {
        border-radius: 8px;
      }
    }
  }
}

/* 响应式调整 */
@media (max-width: 768px) {
  .header-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }
  
  .filter-group {
    grid-template-columns: 1fr;
  }
  
  .action-buttons {
    justify-content: center;
    flex-wrap: wrap;
  }
}

//批量删除样式
.batch-delete-btn {
  border-radius: 8px;
  padding: 10px 20px;
  height: 40px;
  
  &:hover {
    opacity: 0.9;
  }
  
  &:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }
}

/* 全局样式覆盖 */
.detail-dialog .el-dialog {
  border-radius: 12px !important;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1) !important;
}

.detail-dialog .el-dialog__header {
  background: linear-gradient(to right, #6a93cb, #a0c4e4) !important;
  color: white !important;
  border-top-left-radius: 12px !important;
  border-top-right-radius: 12px !important;
  padding: 15px 20px !important;
}

.detail-dialog .el-dialog__title {
  color: white !important;
  font-weight: 600 !important;
}

.detail-dialog .el-form-item {
  margin-bottom: 18px !important;
}

.delete-message-box {
  border-radius: 12px !important;
  
  .el-message-box__header {
    padding: 20px 20px 10px;
  }
  
  .el-message-box__content {
    padding: 15px 20px;
  }
  
  .el-message-box__btns {
    padding: 10px 20px 20px;
  }
}

.success-message {
  border-radius: 8px !important;
  background: #f0f9eb !important;
  border: none !important;
}

.error-message {
  border-radius: 8px !important;
  background: #fef0f0 !important;
  border: none !important;
}
</style>